<template>
  <div>
    <!--轮播图-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
     <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>-->

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <!--三个价值观-->
    <div class="three">
      <div class="left">
       <div class="zuo">
         <i class="iconfont icon-gongsiyuanjing"></i>
       </div>
        <div class="you">
          <p style="margin:50px 189px 0 0; line-height: 47px">我们的愿景</p>
          <p>愿景&nbsp;引领崇尚科技、崇尚创新的风潮,</p>
          <p>成为专利产品研发领域的领导者。</p>
        </div>
      </div>

      <div class="middle">
        <div class="zuo-one">
          <i class="iconfont icon-gongsishiming-"></i>
        </div>
        <div class="you-one">
          <p style="margin-top: 55px">我们的使命</p>
          <p>使命&nbsp;实现更多普通人的发明梦想,用科技创新</p>
          <p>产品解决生活痛点,促进产品市场多元化</p>
          <p>的发展,推动人类社会不断前进的步伐。</p>
        </div>
      </div>

      <div class="right">
        <div class="zuo-two">
          <i class="iconfont icon-chengshi"></i>
        </div>
        <div class="you-two">
          <p style="margin-top: 55px">我们的价值观</p>
          <p>价值观&nbsp;发现创新 / 创造价值 / 成人达己 /</p>
          <p>服务至上</p>
        </div>
      </div>
    </div>

    <!--项目专利 创意-->
    <div class="project-wrap">
      <div class="project-middle">
        <div class="header">
          <div class="line"></div>
          <div class="patent">项目案例-专利</div>
        </div>
        <div class="main">
          <ul class="ui-list">
            <li class="li-item">
              <div class="middle-wrap">
                <a href="javascript:;"></a>
              </div>
              <h3 class="title">电动牙刷
                <a href="javascript:;"></a>
              </h3>
              <div class="text">
                <p>知否知否知否否知否知否知知否知否知否知否知否知否知否</p>
                <p>知否知否知否否知否知否知知否知否知否知否知否知否知否</p>
                <p>知否知否知否知知否知否知知否知否知否知否知否知否知否</p>
              </div>

            </li>
            <li class="li-item">
              <div class="middle-wrap">
                <a href="javascript:;">

                </a>
              </div>
              <h3 class="title">电动牙刷</h3>
              <div class="text">
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
              </div>
            </li>
            <li class="li-item">
              <div class="middle-wrap">
                <a href="javascript:;">

                </a>
              </div>
              <h3 class="title">电动牙刷</h3>
              <div class="text">
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
              </div>
            </li>

          </ul>
        </div></div>
      <!--<div class="more">
        <span>
             查看更多专利
        </span>
      </div>-->
        <!--复制的一份-->
      <div class="project-middle2">
        <div class="header">
          <div class="line"></div>
          <div class="patent">项目案例-创意</div>
        </div>
        <div class="main">
          <ul class="ui-list">
            <li class="li-item">
              <div class="middle-wrap">
                <a href="javascript:;"></a>
              </div>
              <h3 class="title">电动牙刷
                <a href="javascript:;"></a>
              </h3>
              <div class="text">
                <p>知否知否知否否知否知否知知否知否知否知否知否知否知否</p>
                <p>知否知否知否否知否知否知知否知否知否知否知否知否知否</p>
                <p>知否知否知否知知否知否知知否知否知否知否知否知否知否</p>
              </div>

            </li>
            <li class="li-item">
              <div class="middle-wrap">
                <a href="javascript:;">

                </a>
              </div>
              <h3 class="title">电动牙刷</h3>
              <div class="text">
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
              </div>
            </li>
            <li class="li-item">
              <div class="middle-wrap">
                <a href="javascript:;">

                </a>
              </div>
              <h3 class="title">电动牙刷</h3>
              <div class="text">
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
                <p>知否知否知否知否知否知否知否知否知否知否知否知否知否</p>
              </div>
            </li>

          </ul>
        </div></div>
    </div>

    <!--服务流程-->
    <div class="service">
      <div class="flow">
        <div class="line-two"></div>
        <div class="service-flow">服务流程</div>

      </div>
      <div class="kuang">
        <img src="./image/img2.png" alt="">
      </div>
    </div>

    <!--合作伙伴-->
    <div class="partner-wrap">
      <div class="flow">
        <div class="line-two"></div>
        <div class="service-flow">合作伙伴</div>

      </div>
      <div class="partner-kuang">
        <div class="back"><img src="./image/img1.png" alt=""></div>
        <div class="back"><img src="./image/img3.png" alt=""></div>
        <div class="back"><img src="./image/img4.png" alt=""></div>
        <div class="back"><img src="./image/img5.png" alt=""></div>
      </div>
    </div>


  </div>
</template>

<script>

  import 'swiper/dist/css/swiper.min.css'
  import Swiper from 'swiper'
    export default {
      data(){
        return{

        }
      },
      methods:{
        initSwiper(){
          var mySwiper = new Swiper ('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            // loop: true, // 循环模式选项 (已更改)
            autoplay:true,
            delay: 600,//1000 1秒切换一次

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            // scrollbar: {
            //   el: '.swiper-scrollbar',
            // },
          })
        }

      },
      mounted(){
        this.initSwiper()

      }

    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

  .swiper-container
    width: 100%
    height 500px
    .swiper-slide
      width 100%
      background-color slategray
  .three
    height 230px
    display flex
    justify-content center
    line-height: 33px;
    text-align: center;
    .left
      width 400px
      height 230px
      /*border solid 1px grey*/
      /*以下均要设置左浮动，保证在同一行*/
      .zuo
        height 100%
        position relative
        float: left
        i
          width: 50px
          height: 50px
          margin-top 100px
          display inline-block
          font-size 30px
          border-radius 50%
          line-height 50px
          background-color: #F4A460
          color #fff
      .you
        margin-left 70px
        margin-top 66px
        text-align: justify;
    .middle
      width 400px
      height 230px
      margin-right: 40px;
      .zuo-one
        height 100%
        float: left
        i
          width: 50px
          height: 50px
          margin-top 100px
          display block
          font-size 30px
          border-radius 50%
          line-height 50px
          background-color: #009BFF
          color #fff
      .you-one
        margin-left 70px
        margin-top 66px
        text-align: justify;
    .right
      width 400px
      height 230px
      /*border solid 1px grey*/
      .zuo-two
        height 100%
        float: left
        i
          width: 50px
          height: 50px
          margin-top 100px
          display block
          font-size 30px
          border-radius 50%
          line-height 50px
          background-color: #0013FF
          color #fff
      .you-two
        margin-left: 70px
        margin-top 66px
        text-align: justify;
  .project-wrap
    width 100%
    padding: 30px 0;
    background-color #2C303B
    .project-middle
      margin auto
      /*width: 1436px*/
      position relative
      .header
        width: 200px
        margin auto
        /*background-color: darkkhaki*/
        .line
          width: 80px
          margin-left 50px
          border-bottom 5px solid orange
        .patent
          height: 30px
          font-weight bold
          margin-top 15px
          letter-spacing 4px
          margin-left 26px
          color #fff
      .main
        width: 100%

        /*background-color: steelblue*/
        .ui-list
          width: 100%
          height: 100%
          margin-top 30px
          /*background-color: sandybrown*/
          display:flex;
          justify-content:center;
          position relative
          .li-item
            .middle-wrap
              /*background-color #000000*/
              a
                display block
                width: 400px;
                height: 260px;
                background: url(./image/timg.jpg) no-repeat center;
            h3
              font-size: 18px;
              font-weight: 400;
              color: #fff
              cursor pointer;
              text-align: center;
              margin: 20px 82px 20px 0;
              a
                display: block;
                cursor pointer;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            .text
              margin: 0 54px 10px 10px;
              height: 90px;
              line-height: 24px;
              font-size: 14px;
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              color: #fff;
    .project-middle2
      margin auto
      position relative
      .header
        width: 200px
        margin auto
        /*background-color: darkkhaki*/
        .line
          width: 80px
          margin-left 50px
          border-bottom 5px solid #FF800B
        .patent
          height: 30px
          font-weight bold
          margin-top 15px
          letter-spacing 4px
          margin-left 26px
          color #fff

      .main
        width: 100%
        .ui-list
          width: 100%
          height: 100%
          margin-top 30px
          display:flex;
          justify-content:center;
          position relative
          .li-item
            .middle-wrap
              a
                display block
                width: 400px;
                height: 260px;
                background: url(./image/timg.jpg) no-repeat center;
            h3
              font-size: 18px;
              font-weight: 400;
              color: #fff
              cursor pointer;
              text-align: center;
              margin: 20px 82px 20px 0;
              a
                display: block;
                cursor pointer;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            .text
              margin: 0 54px 10px 10px;
              height: 90px;
              line-height: 24px;
              font-size: 14px;
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              color: #fff;

  .service
    width 100%
    height 450px
    /* background-color darkcyan*/
    margin-top 20px
    .flow
      width: 200px
      margin auto
      /*background-color: darkkhaki*/
      .line-two
        width: 80px
        margin-left 50px
        border-bottom 5px solid orange
      .service-flow
        height: 30px
        font-weight bold
        margin-top 15px
        letter-spacing 4px
        margin-left 53px
        color #000
    .kuang
      margin: auto;
      width: 66%;
      img
        width: 100%
        height: 400px
  .partner-wrap
    width 100%
    height 280px
    background-color #fff
    margin-top 20px
    .flow
      width: 200px
      margin auto
      /*background-color: darkkhaki*/
      .line-two
        width: 80px
        margin-left 50px
        border-bottom 5px solid orange
      .service-flow
        height: 30px
        font-weight bold
        margin-top 15px
        letter-spacing 4px
        margin-left 53px
        color #000
    .partner-kuang
      width: 70%
      margin: auto;
      margin-top: 20px;
      display flex
      .back
        width: 200px;
        height: 100px;
        background-color: #f08080;
        margin:auto
        img
          width: 100%
          height: 100px;
</style>
<!--
.more
      height 120px
      display: flex;
      justify-content: center;
      span
        display inline-block
        width: 180px
        height: 38px
        line-height 38px
        border 1px solid #F47C0A
        border-radius 5px
        text-align center
        color #fff
        &:hover
          color wheat

-->
